<template>
  <div v-loading="loading">
    <el-row>
      <el-clo :offset="10" :span="4">
        <br>
        <el-button type="success" style="margin-top: 10px;margin-left: 600px;padding-top: 5px" @click="handleWeather">
          当前城市天气
        </el-button>
      </el-clo>
    </el-row>

    <el-row :gutter="20" v-if="city.length>0">
      <el-col :offset="2" :span="20">
        <el-descriptions title="当前实时天气">

          <el-descriptions-item label="当前城市">{{ city }}</el-descriptions-item>
          <el-descriptions-item label="温度">{{ weather.realtime.temperature }}</el-descriptions-item>
          <el-descriptions-item label="风向">{{ weather.realtime.direct }}</el-descriptions-item>
          <el-descriptions-item label="风力">{{ weather.realtime.power }}</el-descriptions-item>
          <el-descriptions-item label="湿度">{{ weather.realtime.humidity }}</el-descriptions-item>
          <el-descriptions-item label="天气状况">{{ weather.realtime.info }}</el-descriptions-item>
        </el-descriptions>

      </el-col>

      <el-col :offset="2" :span="20">
        <label title="未来五天天气预报">未来五天天气预报</label>
        <el-table :data="weather.future" style="margin-top: 30px;" :gutter="20">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="temperature" label="温度" width="180"></el-table-column>
          <el-table-column prop="direct" label="风向" width="180"></el-table-column>
          <el-table-column prop="weather" label="天气状况"></el-table-column>
        </el-table>

      </el-col>

    </el-row>
    <el-row :gutter="20" v-else-if="city.length===0">
      <el-col :offset="2" :span="20">
        <div style="margin-top: 700px;"></div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import { getWeather } from '@/api/zxh/weather'

export default {
  name: 'weather',
  data() {
    return {
      loading: false,
      city: '',
      weather: {
        realtime: {},
        future: []
      }
    }
  },
  methods: {
    handleWeather() {
      this.loading = true
      getWeather().then(res => {
        const weatherInfo = JSON.parse(res.msg)
        this.city = weatherInfo.result.city
        this.weather.realtime = weatherInfo.result.realtime
        this.weather.future = weatherInfo.result.future
        // console.log(weatherInfo)
        this.loading = false
      }).catch(err => {
          console.log(err)
        }
      )

    }
  }
}
</script>

<style scoped>

</style>
